<template>
	<view class="tompwd" @tap.stop="$event.stopPropagation()">
		<view class="tompwd-box">
			<view class="tompwd-box-head">
				<u-icon @click="back" name="arrow-left" size="36" color="#888"></u-icon>
				<text class="tbh-title">请输入交易密码</text>
				<text></text>
			</view>
			<view class="box">
				<view class="box-item" v-for="(item,index) in 6" :key="index">
					<text class="box-item-dot" v-if="index<val.length"></text>
				</view>
			</view>
			<view class="keyboard">
				<block v-for="(item,index) in keylist" :key="index">
					<view v-if="item=='null'" class="keyboard-item keyboard-item-nobg"></view>
					<view @tap="clear" v-else-if="item=='删除'" class="keyboard-item keyboard-item-nobg">
						<u-icon name="delete"custom-prefix="custom-icon" size="60"></u-icon>
					</view>
					<view @tap="write(item)" v-else class="keyboard-item">{{item}}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'tomPwd',
		data() {
			return {
				keylist:[],//键盘列表
				val:[],//输入值
			};
		},
		created() {
			this.getkeylist()
		},
		methods:{
			back(){
				this.$emit('cancel')
			},
			// 随机0-9排序
			randomsort(a,b){
				return Math.random()>0.5 ? -1 : 1
			},
			// 生成列表
			getkeylist(){
				let arr=[0,1,2,3,4,5,6,7,8,9];
				arr.sort(this.randomsort)
				arr.splice(9,0,'null')
				arr.splice(11,0,'删除')
				this.keylist=arr;
			},
			// 输入
			async write(val){
				if(this.val.length<6){
					this.val.push(val)
					if(this.val.length==6){
						let pwd=this.val.join('');
						this.$emit('confirm',pwd)
					}
				}
			},
			// 清除
			clear(){
				if(this.val.length){
					this.val.splice(this.val.length-1,1)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tom-gap{
		height: 40rpx;
	}
	.tompwd{
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: flex-end;
		background-color: rgba(0,0,0,0.5);
	}
	.tompwd-mask{
		// position: absolute;
		// top: 0;
		// left: 0;
		// right: 0;
		// bottom: 0;
		// background-color: rgba(0,0,0,0.5);
	}
	.tompwd-box{
		background-color: #fff;
	}
	.tompwd-box-head{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 36rpx;
		border-bottom-width: 1px;
		border-bottom-color: #ccc;
	}
	.tbh-title{
		font-size: 36rpx;
		font-weight: bold;
	}
	.box{
		width: 750rpx;
		padding: 60rpx 60rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.box-item{
		width: 90rpx;
		height: 90rpx;
		background-color: #ededed;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
	}
	.box-item-dot{
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background-color: #333333;
	}
	.keyboard{
		// padding: 0 15rpx 15rpx 15rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #ededed;
		border-top:2rpx solid #F2F2F2 ;
		box-sizing: border-box;
	}
	.keyboard-item{
		width: 33.33%;
		height: 100rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 42rpx;
		font-weight: bold;
		background-color: #fff;
		border-bottom:2rpx solid #F2F2F2 ;
	}
	.keyboard-item:nth-child(3n+2){
		border-left:2rpx solid #F2F2F2 ;
		border-right:2rpx solid #F2F2F2 ;
	}
	.keyboard-item-nobg{
		background-color: transparent;
	}
	.keyboard-item-del{
		width: 55rpx;
		height: 42rpx;
	}
</style>
